<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    /*获取项目的根路径*/
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://" + request.getServerName()+":"+request.getServerPort()+path+"/";
    /*basePath就是得到的跟路径类似于：http://localhost:8081/test/*/
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>choice</title>
    <script src="<%=basePath%>/js/jquery-3.7.1.min.js"></script>
    <%--在seat页面引入layui框架--%>
    <link rel="stylesheet" href="<%=basePath%>/layui/css/layui.css">
    <script src="<%=basePath%>/layui/layui.js"></script>
    <!--网页图标-->
    <link rel="shortcut icon" href="<%=basePath%>/img/cat.png" type="image/x-icon">
    <link rel="stylesheet" href="<%=basePath%>/css/choice.css">
</head>
<body>
    <div class="main">
        <div class="content myFlex_x">
            <table style="border-collapse: collapse">
                <!--行-->
                <tr style="font-weight: 800;">
                    <!--列-->
                    <td>服务</td>
                    <td>时间</td>
                    <td>售价</td>
                    <td>选购</td>
                    <!--price只出现一次-->
                    <input id="price" type="hidden" value="${requestScope.cat.price}">
                </tr>
                <c:forEach items="${requestScope.choiceList}" var="choice">
                    <tr>
                        <!--title:鼠标悬停时显示套餐详情服务-->
                        <td title="${choice.choiceInfo}">${choice.choiceName}</td>
                        <td>
                            <%--列表列出服务时间--%>
                            <select class="getDiscount">
                                <%--value=1:初始选项没有折扣--%>
                                <option date-id="" value="1">请选择预约服务时间</option>
                                <c:forEach items="${choice.serviceTimeList}" var="serviceTime">
                                    <%--date-id用于知道用户是否选择了服务时间--%>
                                    <option date-id="${serviceTime.id}" value="${serviceTime.discount}">
                                            ${serviceTime.serviceTime}
                                    </option>
                                </c:forEach>
                            </select>
                        </td>
                        <td>
                            ￥<span class="price">${requestScope.cat.price}</span>
                        </td>
                        <td>
                            <input class="buyTicket" type="button" value="抢购">
                        </td>
                    </tr>
                </c:forEach>
            </table>
        </div>
    </div>
    <script>
        // 当用户选择服务时间时，获取当前服务时间的折扣，重新计算宠物猫的价格
        $(".getDiscount").change(function (){
            // 获取当前用户选择服务时间的折扣
            var discount=$(this).val();
            // 获取当前宠物猫的价格
            var price=$("#price").val();
            // 根据折扣重新计算价格
            var newPrice=Number(discount)*Number(price);
            // 保留两位小数
            newPrice=newPrice.toFixed(2);
            // 将newPrice放进宠物猫价格的标签里
            $(this).parent().next().find("span").text(newPrice);
        })
        // 点击抢购
        $(".buyTicket").click(function (){
            // 判断当前观影时间用户是否选择
            // 获取用户选择的观影时间的id
            // input->td->tr->select(tr中只有一个select)->option(selected)->date-id属性
            var id=$(this).parent().parent().find("select").find("option:selected").attr("date-id");

            console.log(id,price);
            if (id==""){
                alert("请选择服务时间！");
            }else {
                // 支付成功
                layer.msg("支付成功！",{
                    icon: 1,
                    time: 1000,
                },function (){
                    location.reload();
                });
            }
        })
    </script>
</body>
</html>